import React, { ReactNode } from 'react'
import { View, Text, TextInput, Alert, Image, Picker } from 'react-native'
import Label from '../../components/Lable'
import { LinButton, Modal as LinModal, DatePicker, PickerView } from '../../components'
import BasePae from '../../common/basePage'
import { PickerView as PickerView2 } from '@ant-design/react-native'
import {
  NavigationScreenProps,
  NavigationScreenOptions,
  NavigationScreenConfig
} from 'react-navigation'
import ImagePicker, { ImagePickerResponse } from 'react-native-image-picker'
import { PickerData } from '../../components/PickerView'
// More info on all the options is below in the API Reference... just some common use cases shown here
const options = {
  title: 'Select Avatar',
  customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
}

interface State {
  visible: boolean;
  title: string;
  img: string;
  beginDate?: Date | number | string | null;
  endDate?: Date | number | string | null;
  city: string[];
  citys?: PickerData[] | PickerData[][];
}
interface ModalChildProp {
  _close: (data: string | any) => void;
}

export default class EditPlan extends BasePae {
  // static contextType = portalHostContext
  public state: State = {
    visible: false,
    title: '',
    img: '',
    beginDate: new Date(),
    endDate: null,
    city: ['025', '02-1'],
    citys: [{
      label: '北京',
      value: '01',
      children: [
        {
          label: '东城区',
          value: '01-1'
        },
        {
          label: '西城区',
          value: '01-2'
        },
        {
          label: '崇文区',
          value: '01-3'
        },
        {
          label: '宣武区',
          value: '01-4'
        }
      ]
    },
    {
      label: '浙江',
      value: '02',
      children: [
        {
          label: '杭州',
          value: '02-1',
          children: [
            {
              label: '西湖区',
              value: '02-1-1'
            },
            {
              label: '上城区',
              value: '02-1-2'
            },
            {
              label: '江干区',
              value: '02-1-3'
            },
            {
              label: '下城区',
              value: '02-1-4'
            }
          ]
        },
        {
          label: '宁波',
          value: '02-2',
          children: [
            {
              label: 'xx区',
              value: '02-2-1'
            },
            {
              label: 'yy区',
              value: '02-2-2'
            }
          ]
        },
        {
          label: '温州',
          value: '02-3'
        },
        {
          label: '嘉兴',
          value: '02-4'
        },
        {
          label: '湖州',
          value: '02-5'
        },
        {
          label: '绍兴',
          value: '02-6'
        }
      ]
    }]
    // citys: [
    //   [
    //     {
    //       label: '2013',
    //       value: '2013'
    //     },
    //     {
    //       label: '2014',
    //       value: '2014'
    //     }
    //   ],
    //   [
    //     {
    //       label: '春',
    //       value: '春'
    //     },
    //     {
    //       label: '夏',
    //       value: '夏'
    //     }
    //   ]
    // ]
  }

  public title: string = '123'

  public static navigationOptions: NavigationScreenConfig<NavigationScreenOptions> = ({ navigation }: NavigationScreenProps): NavigationScreenOptions => {
    return {
      title: `A`,
      headerRight: (
        <View>
          <LinButton onPress={navigation.getParam('onChooseImage')}>图片</LinButton>
        </View>
      )
    }
  }

  // public constructor (props: NavigationScreenProps) {
  //   super(props)
  //   setTimeout(() => {
  //     this.setState({
  //       citys: [
  //       [
  //           { label: '南京', value: '南京' },
  //           { label: '南京1', value: '南京1' },
  //           { label: '南京2', value: '南京2' },
  //           { label: '南京3', value: '南京3' },
  //           { label: '南京4', value: '南京4' }
  //       ]
  //       ]
  //     })
  //   }, 2000)
  // }

  public componentDidMount (): void {
    this.title = '123'
    this.props.navigation.setParams({ onChooseImage: this.onChooseImage.bind(this) })
  }

  public onChooseImage (): void {
    ImagePicker.launchImageLibrary(options, (response: ImagePickerResponse): void => {
      console.log('Response = ', response)
      if (response.didCancel) {
        console.log('User cancelled image picker')
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error)
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton)
      } else {
        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };
        this.setState({
          img: response.uri
        })
      }
    })
  }

  public onCancel (): void {
    this.setState({
      visible: false
    })
  }

  public onBtnPress1 (): void {
    class ModalComponent extends React.Component<ModalChildProp> {
      public render (): ReactNode {
        const { props } = this
        return (
          <View>
            <Text>123</Text>
            <Text>456</Text>
            <Text>2秒后关闭</Text>
            <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
              <LinButton onPress={(): void => { props._close('默认') }} type={'default'} >
                默认
              </LinButton>
              <LinButton onPress={(): void => { props._close('确定') }} >确定</LinButton>
              <LinButton onPress={(): void => { props._close('取消') }} type={'danger'}>取消</LinButton>
              <LinButton onPress={(): void => { props._close('警告') }} type={'warn'}>警告</LinButton>
            </View>
          </View>)
      }
    }

    const modal1 = LinModal.open(
      ModalComponent,
      null,
      {
        maskCloseable: true
      }
    )

    modal1.afterClose((data: string | object | any): void => {
      Alert.alert(data.toString())
    })
  }

  public render (): ReactNode {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ paddingHorizontal: 20 }}>
          <Label label='开始' style={{ height: 50, backgroundColor: '#fff' }}>
            <DatePicker
              placeholder='请选择开始时间' value={this.state.beginDate}
              onChange={(date): void => { date && this.setState({ beginDate: date }) }}
            />
          </Label>
          <Label label='结束' style={{ height: 50, backgroundColor: '#fff' }}>
            <DatePicker
              placeholder='请选择结束时间' value={this.state.endDate}
              onChange={(date): void => { date && this.setState({ endDate: date }) }}
            />
          </Label>
          <Label label='监督金' style={{ height: 50, backgroundColor: '#fff' }} icon={null}>
            <LinButton onPress={this.onBtnPress1}>
              转入
            </LinButton>
          </Label>
          <View style={{ borderBottomWidth: 1, borderBottomColor: '#ddd', width: '100%', height: 10, alignSelf: 'center' }} />
          <TextInput placeholder='请输入计划内容' multiline />
          {
            !!this.state.img && (<Image style={{ width: '100%', height: 200 }} source={{ uri: this.state.img }} />)
          }
          {/* <PickerView2 cascade={true} data={this.state.citys} value={this.state.city} onChange={(city): void => {
            // this.setState({ city })
          }} /> */}
          <PickerView cascade list={this.state.citys} value={this.state.city} onChange={(city): void => {
            this.setState({ city })
          }} />
          <Text>选择的城市：{JSON.stringify(this.state.city)}</Text>
        </View>
        <View style={{ position: 'absolute', bottom: 0 }}>
          <LinButton style={{ width: '100%', borderRadius: 0, height: 40 }} textStyle={{ fontSize: 16 }}>开始计划</LinButton>
        </View>
      </View>
    )
  }
}

// const styles = StyleSheet.create({
//   // main: {
//   //   flex: 1,
//   //   backgroundColor: 'transparent'
//   // },
//   // container: {
//   //   flex: 1,
//   //   flexDirection: 'column',
//   //   justifyContent: 'flex-end',
//   //   backgroundColor: 'transparent'
//   // },
//   // mask: {
//   //   flex: 1,
//   //   backgroundColor: 'rgba(0, 0, 0, 0.6)'
//   // },
//   // contentBox: {
//   //   backgroundColor: 'rgba(0, 0, 0, 0.6)',
//   //   overflow: 'hidden'
//   // }
// })
